<template>
  <div>
    <el-tree ref="treeId" :data="permission" :props="{label:'name'}" show-checkbox default-expand-all node-key="id" check-strictly />
    <div class="qzn">
      <el-button @click="mwj">取消</el-button>
      <el-button type="primary" @click="hSubmit">确定</el-button>
    </div>

  </div>
</template>

<script>
import { getAssignPermission, getPermissionList, putAssignperm } from '@/api/permissions'
import { tranListToTreeData } from '@/utils'
export default {
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      permission: []
    }
  },
  created() {
    this.loadPermissions()
    this.loadAssignPermission()
  },
  methods: {
    mwj() {
      this.$emit('close')
    },
    async loadPermissions() {
      const { data: res } = await getPermissionList()
      //   console.log(res)
      this.permission = tranListToTreeData(res.data)
    },
    async hSubmit() {
      try {
        const ids = this.$refs.treeId.getCheckedKeys()
        const { data: res } = await putAssignperm({
          id: this.id,
          permIds: ids
        })
        this.mwj()
        this.$message.success(res.message)
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    async loadAssignPermission() {
      const { data: res } = await getAssignPermission(this.id)
      //   console.log(res)
      this.$refs.treeId.setCheckedKeys(res.data.permIds)
    }
  }
}
</script>

<style lang="scss" scoped>
.qzn{
    display: flex;
    justify-content: end;
}
</style>
